<template>
	<view>
		<view class="tip">
			您的预留手机号：<text style="color: #000000;">15831077115</text>
		</view>

		<view class="codeinput">
			<view class="codeinput_left">
				<input type="text" v-model="code" @blur="codecheck()" placeholder="请输入短信验证码"
					style="margin-top: 15px;margin-left: 10px;">
			</view>
			<view class="codeinput_right">
				<view class="start" v-show="show" @click="getCode">{{zi}}</view>
				<view class="timeout" v-show="!show">{{count}} s后重新获取</view>


			</view>
		</view>

		<view class="codetip">
            验证码有效期30分钟   
		</view>
		
		<button disabled style="width: 96%;height: 40px;margin-left: 2%;background-color: #92C2EB;line-height: 40px;" v-if="can">提交</button>
		<button style="width: 96%;height: 40px;margin-left: 2%;background-color: #007AFF;line-height: 40px;color: #fff;" v-else @click="toyan()">提交</button>
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="jumpinput">
				<view class="jumpinput_top">
					<view class="jumptop_left">×</view>
					<view class="jumptop_right">绑定银行卡</view>
				</view>
				<view class="jumpinput_center">银行卡绑定成功</view>
				<view class="jumpinput_bottom">
					<button style="color: #007AFF;font-size: 16px;width: 100%;height: 45px;border: 0px;background-color: #fff;" @click="close()">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zi:'获取验证码',
				
				show: true,

				count: '',

				timer: null,
				
				code:'',
				
				can:true
			}
		},
		methods: {
			        close() {
						uni.navigateTo({
							url:'../bankcard'
						})
			            this.$refs.popup.close('top')
						
			        },
			getCode() {

				const TIME_COUNT = 6;

				if (!this.timer) {

					this.count = TIME_COUNT;

					this.show = false;

					this.timer = setInterval(() => {

						if (this.count > 0 && this.count <= TIME_COUNT) {

							this.count--;
							if(this.count==0){
								this.zi='重新获取'
							}

						} else {

							this.show = true;

							clearInterval(this.timer);

							this.timer = null;

						}

					}, 1000)

				}

			},
			codecheck(){
				if(this.code!=''){
					this.can=false
				}
			},
			toyan(){
				this.can=true
				this.$refs.popup.open('top')
			}
		}
	}
</script>

<style scoped>
	.tip {
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 15px;
		padding-left: 2%;
		background-color: #eeeeee;
		color: #c0c0c0;
	}

	.codeinput {
		width: 100%;
		height: 55px;
		background-color: #fff;
		display: flex;
		flex-wrap: nowrap;
	}

	.codeinput_left {
		width: 70%;
		height: 55px;
	}

	.codeinput_right {
		width: 30%;
		height: 55px;
	}

	.start {
		width: 100%;
		height: 55px;
		line-height: 55px;
		color: #007AFF;
		text-align: center;
		font-size: 15px
	}

	.timeout {
		width: 100%;
		height: 55px;
		line-height: 55px;
		color: #ccc;
		text-align: center;
		font-size: 15px
	}
	.codetip{
		width: 100%;
		height: 40px;
		line-height: 40px;
		color: #ccc;
		font-size: 12px;
		padding-left: 10px;
	}
	
	.jumpinput{
		width: 94%;
		height: 200px;
		background-color: #FFF;
		margin-left: 3%;
		margin-top: 50%;
		border-radius: 10px;
	}
	.jumpinput_top{
		width: 100%;
		height: 45px;
		border-bottom: 1px solid #ccc;
		display: flex;
		flex-wrap: nowrap;
	}
	.jumptop_left{
		width: 20%;
		height: 45px;
		line-height: 45px;
		font-size: 20px;
		margin-left: 2%;
	}
	.jumptop_right{
		width: 40%;
		height: 45px;
		line-height: 45px;
		font-size: 15px;
		margin-left: 20%;
	}
	.jumpinput_center{
		width: 100%;
		height: 100px;
		text-align: center;
		line-height: 100px;
		font-weight: 600;
	}
	.jumpinput_bottom{
		width: 100%;
		height: 45px;
		margin-top: 9px;
	}
</style>
